<script setup>
// import { reqSomething } from '@/api'
import * as echarts from 'echarts'
import { onMounted, ref, reactive } from 'vue'
import { dateTypes } from '@/utils'
import { use } from 'echarts/core'
import { useRoute, useRouter } from 'vue-router'
import bottomCopyringht from '../../../components/bottom-copyright.vue'

import { statisticsDetail, statisticsIndex } from '@/api'
import { dashboardClientOrignalList, dashboardGroupOrignalList, dashboardNewSelect, dashboardFunSelect } from '@/data'
const queryForm = reactive({
	type: '1',
	dateType: ''
})
const Route = useRoute()
const router = useRouter()
const data = reactive({
	customer_size: '',
	add_customer_size: '',
	del_customer_size: '',
	group_size: '',
	add_group_size: '',
	del_group_size: '',
	code: ''
})
const selfTime = ref([])

const dateTypeList = ref([])
dateTypeList.value = dateTypes
const qrcode = ref('https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80')
const statisticsDetailapi = () => {
	statisticsDetail({ ktime: selfTime.value[0], dtime: selfTime.value[1] }).then((res) => {
		let myChart = echarts.init(document.getElementById('myChart123'))
		// 绘制图表
		myChart.setOption({
			xAxis: {
				data: res.data.statistics_date
			},
			yAxis: {},
			series: [
				{
					name: '用户量',
					type: 'line',
					data:
						queryForm.type == '1'
							? res.data.new_contact_cnt
							: queryForm.type == '2'
							? res.data.negative_feedback_cnt
							: queryForm.type == '3'
							? res.data.chat_cnt
							: res.data.message_cnt,
					itemStyle: {
						borderRadius: [0, 5, 5, 0],
						color: '#1890ff'
					},
					lineStyle: {
						color: '#1890ff'
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{
									offset: 0,
									color: 'rgba(32,142,255,0.8)'
								},
								{
									offset: 0.4,
									color: 'rgba(32,142,255,0.3)'
								},
								{
									offset: 1,
									color: 'rgba(32,142,255,0.00)'
								}
							])
						}
					}
				}
			]
		})
		window.onresize = function () {
			// 自适应大小
			myChart.resize()
		}
	})
}
const urllink = (val) => {
	router.push(val)
}
const corp_name =ref()
onMounted(() => {
	// 需要获取到element,所以是onMounted的Hook
	statisticsDetailapi()
	statisticsIndex().then((res) => {
		data.customer_size = res.data.customer_size
		data.add_customer_size = res.data.add_customer_size
		data.del_customer_size = res.data.del_customer_size
		data.group_size = res.data.group_size
		data.add_group_size = res.data.add_group_size
		data.del_group_size = res.data.del_group_size
		data.code = res.data.code
		corp_name.value=res.data.corp_name
	})
})
</script>

<template>
	<div style="margin-left: -20px">
		<MainContainer one-screen :scrollable="false" class="index">
			<div style="height: 100%" class="flex">
				<div class="flex-1 flex-col">
					<div class="flex index-top">
						<section class="section">
							<div class="app-flex-left">
								<span class="table-title">客户统计</span>
								<span class="app-words-tip-weak app-gap-words-left-s">|</span>
								<span class="app-gap-words-left-s a-word-sub" style="cursor:pointer;" @click="urllink('/customerManagement/customermanagement/customerManage')">查看客户</span>
								<MyIcon class="app-gap-words-left app-icon app-grey6-font" name="Eye" />
								<MyIcon class="app-gap-words-left app-icon app-grey6-font" name="EyeSlash" />
							</div>
							<div class="a-mt20 app-flex-left app-white-font">
								<div class="m-i-card3 app-flex-2 a-p2016" :class="'m-i-card3-1'">
									<div class="">
										<div class="app-flex-left">
											<span class="a-word-12">客户总数</span>
											<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
												<div class="app-container">
													成员的全部客户数量
									</div>
												<template #reference>
													<MyIcon class="question-icon weak" name="Question" />
												</template>
											</el-popover>
										</div>
										<div class="a-mt8">
											<span class="a-word-20 a-word-800">{{ data.customer_size }}</span>
										</div>
									</div>
									<div class="a-w40h40 a-back-img" :class="'a-index-client-1'"></div>
								</div>
								<div class="m-i-card3 app-flex-2 a-p2016" :class="'m-i-card3-2'">
									<div class="">
										<div class="app-flex-left">
											<span class="a-word-12">今日新增</span>
											<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
												<div class="app-container">
													成员今日新添加的客户数量，不包含流失数据
									</div>
												<template #reference>
													<MyIcon class="question-icon weak" name="Question" />
												</template>
											</el-popover>
										</div>
										<div class="a-mt8">
											<span class="a-word-20 a-word-800">{{ data.add_customer_size }}</span>
										</div>
									</div>
									<div class="a-w40h40 a-back-img" :class="'a-index-client-2'"></div>
								</div>
								<div class="m-i-card3 app-flex-2 a-p2016" :class="'m-i-card3-3'">
									<div class="">
										<div class="app-flex-left">
											<span class="a-word-12">今日流失</span>
											<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
												<div class="app-container">
													将成员删除的客户数
									</div>
												<template #reference>
													<MyIcon class="question-icon weak" name="Question" />
												</template>
											</el-popover>
										</div>
										<div class="a-mt8">
											<span class="a-word-20 a-word-800">{{ data.del_customer_size }}</span>
										</div>
									</div>
									<div class="a-w40h40 a-back-img" :class="'a-index-client-3'"></div>
								</div>
							</div>
						</section>
						<section class="section">
							<div class="app-flex-left">
								<span class="table-title">群统计</span>
								<span class="app-words-tip-weak app-gap-words-left-s">|</span>
								<span class="app-gap-words-left-s a-word-sub" style="cursor:pointer;" @click="urllink('/groupManagement/groupManagement/customerList')">查看客户群</span>
								<MyIcon class="app-gap-words-left app-icon app-grey6-font" name="Eye" />
								<MyIcon class="app-gap-words-left app-icon app-grey6-font" name="EyeSlash" />
							</div>
							<div class="a-mt20 app-flex-left app-white-font">
								<div class="m-i-card3 app-flex-2 a-p2016" :class="'m-i-group3-1'">
									<div class="">
										<div class="app-flex-left">
											<span class="a-word-12">群总数</span>
											<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
												<div class="app-container">
													全部的群聊数量
									</div>
												<template #reference>
													<MyIcon class="question-icon weak" name="Question" />
												</template>
											</el-popover>
										</div>
										<div class="a-mt8">
											<span class="a-word-20 a-word-800">{{ data.group_size }}</span>
										</div>
									</div>
									<div class="a-w40h40 a-back-img" :class="'a-index-group-1'"></div>
								</div>
								<div class="m-i-card3 app-flex-2 a-p2016" :class="'m-i-group3-2'">
									<div class="">
										<div class="app-flex-left">
											<span class="a-word-12">今日入群</span>
											<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
												<div class="app-container">
													进入群聊的成员数量，包括企业员工
									</div>
												<template #reference>
													<MyIcon class="question-icon weak" name="Question" />
												</template>
											</el-popover>
										</div>
										<div class="a-mt8">
											<span class="a-word-20 a-word-800">{{ data.add_group_size }}</span>
										</div>
									</div>
									<div class="a-w40h40 a-back-img" :class="'a-index-group-1'"></div>
								</div>
								<div class="m-i-card3 app-flex-2 a-p2016" :class="'m-i-group3-3'">
									<div class="">
										<div class="app-flex-left">
											<span class="a-word-12">今日退群</span>
											<el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
												<div class="app-container">
													退出群聊的成员数量，包括企业员工数量
									</div>
												<template #reference>
													<MyIcon class="question-icon weak" name="Question" />
												</template>
											</el-popover>
										</div>
										<div class="a-mt8">
											<span class="a-word-20 a-word-800">{{ data.del_group_size }}</span>
										</div>
									</div>
									<div class="a-w40h40 a-back-img" :class="'a-index-group-1'"></div>
								</div>
							</div>
						</section>
					</div>
					<section class="flex-1 section">
						<div class="table-title">统计折线图</div>
						<div class="app-gap-block-top">
							<div>
								<el-radio-group v-model="queryForm.type" size="large">
									<!-- <el-radio-button label="total" >总客户数</el-radio-button> -->
									<el-radio-button label="1" @click="statisticsDetailapi">新增客户数</el-radio-button>
									<el-radio-button label="2" @click="statisticsDetailapi">流失客户数</el-radio-button>
									<el-radio-button label="3" @click="statisticsDetailapi">聊天总数</el-radio-button>
									<el-radio-button label="4" @click="statisticsDetailapi">发送消息数</el-radio-button>
								</el-radio-group>
							</div>
							<div class="app-gap-block-top">
								<!-- <el-select v-model="queryForm.dateType" class="m-2" placeholder="请选择" size="large">
              <el-option
                v-for="(item,index) in dateTypeList"
                :key="index"
                :label="item.name"
                :value="item.name"
              />
				</el-select> -->
								<span class="app-gap-words-left app-select-right">自定义：</span>
								<el-date-picker
									value-format="YYYY-MM-DD"
									v-model="selfTime"
									type="daterange"
									range-separator="~"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									size="large"
								/>
							</div>

							<div class="app-gap-block-top">
								<div id="myChart123" :style="{ width: '100%', height: '550px' }"></div>
							</div>
						</div>
					</section>
				</div>
				<div class="flex-col index-r">
					<section class="section section1" style="height: 260px">
						<div class="table-title a-mt20 a-ml16">扫码联系专属客服</div>
						<div class="app-flex-center a-mt24">
							<el-image :src="data.code" class="a-w100" />
						</div>
						<div class="a-p140 a-back-img app-white-font app-flex-center-column a-mt24 a-index-servicer a-w100p">
							<div class="a-word-12" style="margin-bottom: 4px;width: 60%;text-align: center;">公司名称：{{corp_name}}</div>
							<!-- <div class="m-i-btn">在线更新</div> -->
						</div>
					</section>
					<section class="section">
						<div class="table-title">入门指引</div>

						<div class="m-i-new-block" v-for="(item, index) in dashboardNewSelect" :key="index">
							<div class="app-flex-2">
								<div class="name">{{ item.name }}</div>
								<div class="btn app-flex-center">查看</div>
							</div>
						</div>
					</section>
					<section class="flex-1 section">
						<div class="table-title">常用功能</div>
						<div
							class="m-i-fun-block"
							v-for="(item, index) in dashboardFunSelect"
							:key="index"
							style="cursor: pointer"
							@click="urllink(item.url)"
						>
							<div class="app-flex-2">
								<div class="app-flex-left">
									<div class="a-back-img a-w30h30" :class="'a-index-fun-' + item.id"></div>
									<span class="name a-ml16">{{ item.name }}</span>
								</div>
								<div class="btn">></div>
							</div>
						</div>
					</section>
				</div>
				<bottomCopyringht></bottomCopyringht>
			</div>
			
		</MainContainer>
		
	</div>
	<!-- <footer style="height: 40px">
		<el-row justify="center">©2022</el-row>
	</footer> -->
</template>

<style lang="scss" scoped>
@import url('../../../style/app-component.scss');
@import '../../../style/mixin.scss';
.index {
	background: none;

	&-top {
		height: 164px;
		margin-bottom: 20px;
		.section {
			flex: 1;
			margin-right: 20px;
			&:last-child {
				margin-right: 0;
			}
		}
	}
	&-r {
		width: 240px;
		margin-left: 20px;
		.section {
			margin-bottom: 20px;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}
.section {
	padding: 16px 20px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0px 2px 12px -2px rgba(0, 0, 0, 0.04);
}
.section1 {
	padding: 0;
}
.m-i-card3 {
	width: calc(100% / 3);
	margin-right: 20px;
	border-radius: var(--el-border-radius-base);
}
.m-i-card3:nth-last-child(1) {
	margin-right: 0px;
}
.m-i-card3-1 {
	background: linear-gradient(135deg, #208eff 0%, #925cf8 100%);
}
.m-i-card3-2 {
	background: linear-gradient(28deg, #8f8cfe 0%, #4aabff 100%);
}
.m-i-card3-3 {
	background: linear-gradient(135deg, #38caf3 0%, #13e2ca 100%);
}
.m-i-group3-1 {
	background: linear-gradient(28deg, #ff7e57 0%, #fd9586 100%);
}
.m-i-group3-2 {
	background: linear-gradient(28deg, #fdbe2c 0%, #fedd66 100%);
}
.m-i-group3-3 {
	background: linear-gradient(135deg, #ffa1ae 0%, #fb5e8d 100%);
}
.m-i-btn {
	padding: 2px 12px;
	border: 1px solid #fff;
	font-size: 12px;
	border-radius: 4px;
}
.m-i-new-block {
	background: #f0f4fa;
	border-radius: 4px;
	padding: 12px;
	margin-top: 10px;
	.name {
		font-size: 12px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #000000;
		line-height: 16px;
	}
	.btn {
		width: 40px;
		height: 20px;
		background: #ffffff;
		border-radius: 2px;
		border: 1px solid #208eff;
		font-weight: 500;
		color: #208eff;
		font-size: 12px;
	}
}
.m-i-fun-block {
	background: #f0f4fa;
	border-radius: 4px;
	padding: 12px;
	margin-top: 10px;
	.name {
		font-size: 12px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #000000;
		line-height: 16px;
	}
	.btn {
		font-weight: 500;
		color: #c4c7cc;
		font-size: 16px;
	}
}
</style>
